<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>HomePage_GuanZhu</title>
       
        <link href="../../../common/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <link href="../../../common/zui/css/zui.css" rel="stylesheet" />
        <link href="../../../common/zui/lib/datagrid/zui.datagrid.min.css" rel="stylesheet" type="text/css">
        <script src="../../../common/zui/js/zui.min.js"></script>
        <script src="../../../common/zui/lib/datagrid/zui.datagrid.min.js" type="text/javascript"></script>
        <script src="../../../common/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        
         <link rel="stylesheet" href="../../../common/layui/css/layui.css">
         <script src="../../../common/layui/layui.js"></script>
         
        <meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 		
 		<link href="../../../common/css/GeRenHomePage/GuZhu.css" rel="stylesheet" type="text/css">
 		<link href="../../../common/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" href="../../../common/bootstrap/js/bootstrap.js"> </script>
		
 		
 		<script>
     		

 		$(document).ready(function(){
 			
			$(".GuanZu_content_main_r_233").load("/Homepage/showGuanZuKuang?userid="+${user.userId})
		
		//			*********************************************导航栏***********************************************	
	
		$(".GuanZu_content_main_l_daoHang").on("click",function(){
				$(".GuanZu_content_main_l_daoHang").removeClass("hongZhongDaoHang");
				$(".GuanZu_content_main_l_daoHang").removeClass("XuanZhongZiTi");
				
				
				$(".GuanZu_content_main_l_daoHang").addClass("WeiXuanZhongZiTi");
				$(".GuanZu_content_main_l_daoHang").addClass("background_white");
				
				$(this).removeClass("WeiXuanZhongZiTi");
				$(this).removeClass("background_white");
				$(this).addClass("hongZhongDaoHang");
				$(this).addClass("XuanZhongZiTi");
				if($(this).attr("name")!="guanzhu"){
					$(".My_li_box").removeClass("hongZhongDaoHang");
					$(".My_li_box").removeClass("XuanZhongZiTi");
				
					
					$(".My_li_box").addClass("WeiXuanZhongZiTi");
					$(".My_li_box").addClass("background_white");
				}
				
				if($(this).attr("name")=="guanzhu"){
					
					$(".GuanZu_content_main_r_233").load("/Homepage/showGuanZuKuang?userid="+${user.userId})
					
				}
				
				if($(this).attr("name")=="fenshi"){
					
					$(".GuanZu_content_main_r_233").load("/Homepage/showFansKuang?userid="+${user.userId})
					
				}
				if($(this).attr("name")=="heimingdan"){
					
					$(".GuanZu_content_main_r_233").load("/Homepage/showGuanZuKuang?userid="+${user.userId})
					
				}
				
		})
		
		
		$(".My_li_box").on("click",function(){
				$(".My_li_box").removeClass("hongZhongDaoHang");
				$(".My_li_box").removeClass("XuanZhongZiTi");
				
				
				$(".My_li_box").addClass("WeiXuanZhongZiTi");
				$(".My_li_box").addClass("background_white");
				
				$(this).removeClass("WeiXuanZhongZiTi");
				$(this).removeClass("background_white");
				$(this).addClass("hongZhongDaoHang");
				$(this).addClass("XuanZhongZiTi");
				
				
				if($(this).attr("name")=="Yifenzu"){
						
						$(".My_li_box_Yifenzhu").toggleClass("yinCangBox");
						
				}
				if($(this).attr("name")!="Yifenzu"){
					
						$(".My_li_box_Yifenzhu").addClass("yinCangBox");
						
				}
				if($(this).attr("name")=="WeiFenZu111"){
					
					$(".GuanZu_content_main_r_233").load("/Homepage/showGuanZuKuang3?userid="+${user.userId})
					//alert("??????")
				}
				
				$(".GuanZu_content_main_l_daoHang").removeClass("hongZhongDaoHang");
				$(".GuanZu_content_main_l_daoHang").removeClass("XuanZhongZiTi");
				
				
				$(".GuanZu_content_main_l_daoHang").addClass("WeiXuanZhongZiTi");
				$(".GuanZu_content_main_l_daoHang").addClass("background_white");
				
				$(".guanlian1").removeClass("WeiXuanZhongZiTi");
				$(".guanlian1").removeClass("background_white");
				$(".guanlian1").addClass("hongZhongDaoHang");
				$(".guanlian1").addClass("XuanZhongZiTi");
		})
		
		$(".FenZhuMin").on("click",function(){
			
			$(".GuanZu_content_main_r_233").load("/Homepage/showGuanZuKuang2?userid="+${user.userId}+"&zuid="+$(this).attr("name"))
		
		})
		$(".xingjianFenZhu").on("click",function(){
			//alert($("#xinFenZhuMin1").val())
			$.post(
					"/Homepage/chuangjianfengzhu123?userid="+${user.userId}+"&ZuMin="+(($("#xinFenZhuMin1").val() == null)? 0:$("#xinFenZhuMin1").val()),
					function(data){
						
						if(data="success"){
							
							window.location.href="/Homepage/showHomePage2?fleg1=8&userid="+${user.userId}
						}
					},
					"text")
			
			
			
		
		})
		
		
		
		
		
		
//	*********************************************模态框***********************************************	
		$(".addFenZu").on("shown.bs.modal", function() {
					$("#myModal2222").focus();
					
					$(".modal-backdrop").remove();
				});
		
	})
     	</script>
    </head>
     	
    
    <body>
    	<div class="GuanZu_content_main">
    		<div class="GuanZu_content_main_l">
    			<ul class="DaoHang_ul">
    				<div class="background_white">
    				<div class="GuanZu_content_main_l_daoHang background_white guanlian1 daohang_height1" name="guanzhu">
    				
    					<li>
    						<p><i class="layui-icon layui-icon-username WeiXuanZhongZiTi" ></i>
    						<span class="W_f14 S_txt1" >关注</span></p>
    					</li>
    				</div>
    					<ul>
    						<div class="My_li_box">
    							<li><i class="layui-icon layui-icon-fire"></i>特别关注</li>
    						</div>
    						<div class="My_li_box">
    							<li><i class="layui-icon layui-icon-engine"></i>好友圈</li>
    						</div>
    						<div class="My_li_box">
    							<li><i class="icon icon-heart"></i>兴趣主页</li>
    						</div>
    						<div class="My_li_box" name="WeiFenZu111">
    							<li><i class="layui-icon layui-icon-circle-dot"></i>未分组</li>
    						</div>
    						<div class="My_li_box " name="Yifenzu">
    							<li><i class="layui-icon layui-icon-circle-dot"></i>已分组</li>
    							
    						</div>
    						<div class="My_li_box_Yifenzhu yinCangBox"> 
    									<c:forEach items="${group }" var="GR" varStatus="statu">
    									<a class="FenZhuMin" name="${GR.groupId }" ><p ><i class="layui-icon layui-icon-circle-dot"></i>${GR.friendgroupName }</p></a>
    									</c:forEach>
    						</div>
    						<div class="My_li_box addFenZu"  data-toggle="modal" data-target="#myModal2222">
    							<li><a><i class=" icon-plus"></i>创建新分组</a></li>
    						</div>
    					</ul>
    				<div class="GuanZu_content_main_l_daoHang daohang_height2" name="fenshi">
    					<li>
    						<i class="layui-icon layui-icon-user WeiXuanZhongZiTi" ></i>
    						<span>粉丝</span>
    					</li>
    				</div>
    				<div class="GuanZu_content_main_l_daoHang daohang_height2" name="heimingdan">
    					<li>
    						<i class="layui-icon layui-icon-friends WeiXuanZhongZiTi" ></i>
    						<span>黑名单</span>
    					</li>
    				</div>
    			</div>
    			</ul>
    		</div>
    		
    		<div class="GuanZu_content_main_r">
    			<div class="GuanZu_content_main_r_233">
    			
    			</div>
    		
    		</div>
    	</div>
    	
    	<!--模态框1////////*************************************************************************************************************************************************************************************************-->
  		<div><div>	
			<div class="modal fade" id="myModal2222" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  								
  								<div class="modal-dialog" role="document">
   								<div class="modal-content">
     							<div class="modal-header">
       							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        						<h4 class="modal-title" id="myModalLabel">请填写新分组名</h4>
      							</div>
      						
      							<div class="modal-body">
       							 	<input class="xinFenZhuMin" id="xinFenZhuMin1" width="100%"></input>
      							</div>
      							<div class="modal-footer">
        							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        							<button type="submit" class="btn btn-primary xingjianFenZhu ">确定</button>
      							</div>
      						
    					</div>
		</div></div>
		<!--模态框1////////*************************************************************************************************************************************************************************************************-->

 	</body>
</html>